<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
    <!-- 引入 layui.css -->
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
   <style type="text/css">
  #kuang{
	background-color:white;
	line-height:2.5;
	margin-bottom: 20px;
  }
  .tou{
 	box-shadow:1px 1px 1px darkgray,-1px -1px 1px darkgray;
  }
   </style>
   
   <script src="/static/js/jquery.min.js"></script>   
   <script src="/static/js/scriptindex.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/lib/layui/layui.js"></script>
    
   <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
   
</head>
<body style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	  
	  
	  	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
</script>



   <!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 

<br>

<div class="container ">
  <!-- Content here -->
<!-- 公告 -->
      <!-- 公告 -->
       <div class="row">
         <div class="col-md-12 col-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
           <a href="/blog/index" style="margin-left: 30px;color: darkgray">网站首页 </a>  
           <i class="icon angle double right"> </i>
            
            <span> 个人信息 </span> 
          
           </p>
         </div>
       </div>

<br>


 <!-- 内容 -->
    <div class="row" >
         <div class="col-md-12 col-12 " >

              <div class="card" style="width: 9rem;margin: auto">
                  <img id="imgurl" style="" th:src="${user.imgUrl!=null?user.imgUrl:''}"  class="card-img-top" alt="...">    
                  <button type="button"  class="card-text btn btn-success" id="imagechange">更改头像</button>       
             </div>



</div>
</div>

<br/>


 <div class="row">
         <div class="col-md-12 col-12 " style="background-color: white;">
            <div > 

<form class="layui-form layui-form-pane" id="userform" method="post" action="/user/all" >
   <input type="hidden" name="id" th:value="${user.id!=null?user.id:''}">

  <div class="layui-form-item">
    <label class="layui-form-label">昵称</label>
    <div class="layui-input-block">
     
      <input type="text" name="nickname" required th:value="${user.nickname!=null?user.nickname:''}"  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
    </div>
  </div>
  
   <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男"  title="男" th:checked="${user.sex=='男'}">   
      <input type="radio" name="sex" value="女" title="女" th:checked="${user.sex=='女'}"> 
    </div>
  </div>
  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">座右铭</label>
    <div class="layui-input-block">
      <textarea name="motto"  th:text="${user.motto!=null?user.motto:''}"  placeholder="未填写座右铭" class="layui-textarea"></textarea>
    </div>
  </div>
  
   <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
      <input type="password" name="password"  th:value="${user.password!=null?user.password:''}"   placeholder="未设置登录密码" autocomplete="off" class="layui-input">
    </div>
    
    <div class="layui-input-inline">
       <button type="button"  lay-submit lay-filter="lookpwd" id="lookpwd"	class="layui-btn layui-btn-primary layui-border-green">查看密码</button>
    </div>
    
  </div>
  
  
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-inline">
      <input type="text" id="emailshow" th:value="${user.email!=null?user.email:''}" style="color: #C0C0C0" disabled="true" readonly="readonly"   placeholder="未绑定邮箱" autocomplete="off" class="layui-input">
    </div>

     <div class="layui-input-inline" id="emailyzm2">
        <button type="button" lay-submit lay-filter="get" id="yzmbutton" class="layui-btn layui-btn-primary layui-border-green" th:text="${user.email!=null?'更改邮箱':'开始绑定邮箱'}"> 开始绑定邮箱 </button>
     </div>

  </div>
  
  
  
  
  
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>
  </div>
</form>

<br/>
             </div>
             
             
           </div>
       </div>
   </div>
 
     <!-- 按钮模块 -->
<div class="ui anniu flowing popup transition hidden"  style="padding: 2px">
 
    <div class="ui  buttons" style="width:186px">
       <button class="ui positive button" onclick="upimg()">上传图片</button>
       <div class="or"></div>
       <button class="ui  button" onclick="urlimg()">现有url</button>
    </div>
    
 </div>
 
 
 <!-- 弹出层上传图片 -->
 <div class="ui modal" style="width: 290px;height: 290px">
  <div class="header">上传头像</div>
  <div class="content">
           <!--拖拽文件上传div-->
             <div class="layui-upload-drag" id="upload">
                 <i class="layui-icon"></i>
                 <p>点击上传，或将文件拖拽到此处</p>
                 <div class="layui-hide" id="uploadDemoView">
                     <img id="imgurl2" alt="" src="">
                 </div>
                 <!-- <p id="text"></p> --> 
             </div>
              
  </div>
</div>





<div id="email" style="display: none;margin: 0px 10px">

    <div class="input-group mb-3">
        <input type="text"   name="email"  class="form-control" placeholder="请输入你的邮箱" aria-label="请输入你的邮箱" >
        <div class="input-group-append">
            <button onclick="hqyzm()"  class="btn btn-outline-success" type="button" >获取验证码</button>
        </div>
    </div>

    <div class="input-group mb-3">
        <input type="text" name="emailyzm"  class="form-control" placeholder="请输入验证码" aria-label="Recipient's username" >
    </div>

    <div class="input-group mb-3">
        <button onclick="yz()" type="button" class="btn btn-success">立即提交</button>
    </div>

</div>

 
<script>


//自行上传图片
   function upimg(){
      $('.anniu').css('z-index','10');
        $('.ui.modal').modal('show');
    }
    
    
//上传url    
     function urlimg(){
      $('.anniu').css('z-index','10');
      
      layui.use('layer', function(){
             var layer = layui.layer;
          
             layer.prompt(
                           {
                              formType: 0,//0表示文本
                              title: '请输入头像链接'
                           },
                  function(value, index, elem){
                   var imgurl = value;
                   
                   //判断url是否有效
                    return new Promise((resolve, reject) => {
			              const ImgObj = new Image(); // 判断图片是否存在
			              ImgObj.src = imgurl;
			          ImgObj.onload = (res) => {
					     
					     //有效url，发送post到后端 
					       $.post(
                                 '/user/img/url',
                                 {id:[[${user.id}]],url:value},
                                 function(data){
                                  if(data.result == "true"){
                                  //刷新图片
                                   $('#imgurl').attr("src",imgurl);                                 
                                  //提示成功
                                     layui.use('layer', function(){
                                       var layer = layui.layer;
                                       layer.msg('更改成功');
                                         });  
                                    layer.close(index);     
                                  }else{
                                  //提示失败
                                     layui.use('layer', function(){
                                       var layer = layui.layer;
                                       layer.msg('url更改失败');
                                         });  
                                  }
                                });
                                
			              resolve(res);
			           };
			         ImgObj.onerror = (err) => {
			         
			          //失败提示窗口
                      layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('无效的图片地址');
                      });   
			            reject(err);
			            
			        };
			    }).catch((e) => { }); // 加上这句不会报错（Uncaught (in promise)）
                  
                  
                  layer.close(index);
                  });
      
      
   });              
    
    
    }

//选择框
 $('#imagechange').popup({
        popup : $('.anniu'),
        on : 'click',
        position: 'bottom center'
    });




//Demo
layui.use('form', function(){
  var form = layui.form;
  
    //查看密码
  form.on('submit(lookpwd)', function(data){
  
   if($("input[name='password']").attr("type") == "text"){
     $("input[name='password']").attr("type","password");
      //修改查看按钮
      $("#lookpwd").html("显示密码");
   }else{
     $("input[name='password']").attr("type","text");
     //修改按钮
      $("#lookpwd").html("隐藏密码");
   }
     
  })
  
  
  
  //表单请求提交
  form.on('submit(formDemo)', function(data){

    $.post(
            "/user/pwdemail",
            {id:[[${user.id}]]},
            function(data){    
             var tag1 = true;

            //判断密码是否为空
            if(data.pwd=="true"){
            
               if($("input[name='password']").val()==""){
                    
                           　layui.use('layer', function(){
                        var layer = layui.layer;
                         layer.msg('已有密码, 不可更改为空', {icon: 5});   
                      });
                //标记提交
                  tag1 = false;        
               }          
            }
             
            
            if(tag1){
            //提交
             $("#userform").submit();
            }
            
            })      
 
   return false;
  });




  //弹出层
 form.on('submit(get)', function (data) {

     layui.use('layer', function(){
         var layer = layui.layer;
         layer.open({
                title: "绑定邮箱",
                type: 1 ,
                content: $("#email") //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            })

     });

		return false;
	});

});
  

//获取验证码
function  hqyzm(){

    //获取邮箱
    var email = $("input[name='email']").val();
    //正则表达式
    var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
    if(email == ""){

        //输入不能为空
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.msg('邮箱不能为空', {icon: 5});
        });

    }else if(!reg.test(email)){

        //正则验证不通过，格式不对
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.msg('邮箱格式不对', {icon: 5});
        });

    }else{

        //发送获取验证码的请求
        $.post("/user/yzm/email",{email:email,id:[[${user.id}]]},function(data){
            if(data.result == "true"){

                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('发送成功!', {icon: 1});
                });
            }else{

                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('发送失败', {icon: 5});
                });
            }
        });

    }
}

//校验验证码
function   yz(){
    //获取邮箱验证码
    var emailcode =  $("input[name='emailyzm']").val();
    //获取邮箱
    var email = $("input[name='email']").val();
    //发送post请求
    $.post(
        "/user/yzm/email/yz",
        {id:[[${user.id}]],email:email,emailcode:emailcode},
        function(data){
            if(data.result == "true"){
                //绑定成功
                layui.use('layer', function(){
                    var layer = layui.layer;

                    //关闭层
                  //  layer.close(indexemali);
                    //提示成功
                    layer.msg('绑定成功!', {icon: 1});
                    $("#emailshow").val(email);
                });

            }else {
                //绑定失败
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.msg('绑定失败!', {icon: 5});
                });

            }
        }
    )
}



//图片上传
layui.use(['upload', 'element', 'form', 'layer', 'jquery', 'laydate'], function () {
  
 var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate;
//拖拽上传
        upload.render({
            elem: '#upload',
            url: '/user/img/up' //改成您自己的上传接口
            ,accept:'images'
            ,done: function (data) {
                let result = data.result;
                if("true" == result){

                  let imgurl = data.imgurl;

                  $('.ui.modal').modal('hide');    
                  $('#imgurl').attr("src",imgurl);
                  //动态更改上方头像图片

                   $('#UserHeadImg').attr("src",imgurl);

                  layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('上传成功!', {icon: 1});
                      });
                 
               
                }else{
                   layui.use('layer', function(){
                        var layer = layui.layer;
                         layer.msg('上传失败', {icon: 5});   
                      });
                        
                }
            }
            ,data:{
                id: "[[${user.id}]]"
            }
            ,error: function(res){
                //请求异常回调
                console.log(res)
            }
        });
});

</script>




</body>
</html>
